/**
 * 博客系统统一样式文件
 * 简化设计，统一管理所有页面样式
 * 严格按照main.sql表结构设计，每个样式都有详细注释
 */

/* 基础重置样式 - 清除浏览器默认样式 */
* {
    margin: 0;                      /* 清除默认外边距 */
    padding: 0;                     /* 清除默认内边距 */
    box-sizing: border-box;         /* 盒模型包含边框和内边距 */
}

/* 页面基础样式 */
body {
    font-family: "Microsoft YaHei", Arial, sans-serif;  /* 设置字体为微软雅黑 */
    line-height: 1.6;               /* 设置行高为1.6倍 */
    color: #333;                    /* 设置文字颜色为深灰色 */
    background-color: #f5f5f5;      /* 设置页面背景色为浅灰色 */
}

/* 容器样式 - 限制内容宽度并居中 */
.container {
    max-width: 1200px;              /* 最大宽度1200px */
    margin: 0 auto;                 /* 水平居中 */
    padding: 20px;                  /* 内边距20px */
}

/* ==================== 页面头部样式 ==================== */

/* 前台页面头部 */
header {
    background: #fff;               /* 白色背景 */
    padding: 20px 0;                /* 上下内边距20px */
    margin-bottom: 30px;            /* 下外边距30px */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* 添加阴影效果 */
}

/* 头部内容布局 */
.header-content {
    display: flex;                  /* 使用弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center;            /* 垂直居中 */
}

/* 网站Logo样式 */
.logo {
    font-size: 24px;                /* 字体大小24px */
    font-weight: bold;              /* 粗体 */
    color: #2c3e50;                 /* 深蓝色 */
}

/* 导航菜单样式 */
.nav {
    display: flex;                  /* 弹性布局 */
    gap: 20px;                      /* 项目间距20px */
}

/* 导航链接样式 */
.nav a {
    text-decoration: none;          /* 去除下划线 */
    color: #333;                    /* 深灰色文字 */
    padding: 10px 15px;             /* 内边距 */
    border-radius: 5px;             /* 圆角5px */
    transition: background-color 0.3s;  /* 背景色过渡效果 */
}

/* 导航链接悬停和激活状态 */
.nav a:hover, .nav a.active {
    background-color: #3498db;      /* 蓝色背景 */
    color: white;                   /* 白色文字 */
}

/* 管理后台头部样式 */
.admin-header {
    background: #2c3e50;            /* 深蓝色背景 */
    color: white;                   /* 白色文字 */
    padding: 15px 0;                /* 上下内边距15px */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* 阴影效果 */
}

/* 管理后台Logo样式 */
.admin-header .logo {
    color: white;                   /* 白色文字 */
    font-size: 20px;                /* 字体大小20px */
}

/* 用户信息区域 */
.user-info {
    display: flex;                  /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    gap: 15px;                      /* 项目间距15px */
}

/* 管理后台导航链接 */
.nav-links {
    display: flex;                  /* 弹性布局 */
    gap: 15px;                      /* 项目间距15px */
}

/* 管理后台导航链接样式 */
.nav-links a {
    color: white;                   /* 白色文字 */
    text-decoration: none;          /* 去除下划线 */
    padding: 8px 15px;              /* 内边距 */
    border-radius: 4px;             /* 圆角4px */
    transition: background-color 0.3s;  /* 背景色过渡 */
}

/* 管理后台导航链接悬停效果 */
.nav-links a:hover {
    background-color: rgba(255,255,255,0.1);  /* 半透明白色背景 */
}

/* ==================== 按钮样式 ==================== */

/* 基础按钮样式 */
.btn {
    background: #3498db;            /* 蓝色背景 */
    color: white;                   /* 白色文字 */
    padding: 12px 20px;             /* 内边距 */
    border: none;                   /* 无边框 */
    border-radius: 5px;             /* 圆角5px */
    font-size: 14px;                /* 字体大小14px */
    cursor: pointer;                /* 鼠标指针样式 */
    transition: background-color 0.3s;  /* 背景色过渡 */
    text-decoration: none;          /* 去除下划线 */
    display: inline-block;          /* 行内块元素 */
    text-align: center;             /* 文字居中 */
}

/* 按钮悬停效果 */
.btn:hover {
    background: #2980b9;            /* 深蓝色背景 */
}

/* 次要按钮样式 */
.btn-secondary {
    background: #95a5a6;            /* 灰色背景 */
}

.btn-secondary:hover {
    background: #7f8c8d;            /* 深灰色背景 */
}

/* 成功按钮样式 */
.btn-success {
    background: #27ae60;            /* 绿色背景 */
}

.btn-success:hover {
    background: #229954;            /* 深绿色背景 */
}

/* 危险按钮样式 */
.btn-danger {
    background: #e74c3c;            /* 红色背景 */
}

.btn-danger:hover {
    background: #c0392b;            /* 深红色背景 */
}

/* 小尺寸按钮 */
.btn-small {
    padding: 6px 12px;              /* 较小的内边距 */
    font-size: 12px;                /* 较小的字体 */
}

/* ==================== 消息提示样式 ==================== */

/* 基础提示框样式 */
.alert {
    padding: 15px;                  /* 内边距15px */
    border-radius: 5px;             /* 圆角5px */
    margin-bottom: 20px;            /* 下外边距20px */
    text-align: center;             /* 文字居中 */
}

/* 成功消息样式 */
.alert-success {
    background: #d4edda;            /* 浅绿色背景 */
    color: #155724;                 /* 深绿色文字 */
    border: 1px solid #c3e6cb;      /* 绿色边框 */
}

/* 错误消息样式 */
.alert-error {
    background: #f8d7da;            /* 浅红色背景 */
    color: #721c24;                 /* 深红色文字 */
    border: 1px solid #f5c6cb;      /* 红色边框 */
}

/* 警告消息样式 */
.alert-warning {
    background: #fff3cd;            /* 浅黄色背景 */
    color: #856404;                 /* 深黄色文字 */
    border: 1px solid #ffeaa7;      /* 黄色边框 */
}

/* 信息消息样式 */
.alert-info {
    background: #d1ecf1;            /* 浅蓝色背景 */
    color: #0c5460;                 /* 深蓝色文字 */
    border: 1px solid #bee5eb;      /* 蓝色边框 */
}

/* ==================== 卡片容器样式 ==================== */

/* 基础卡片样式 */
.card {
    background: white;              /* 白色背景 */
    padding: 30px;                  /* 内边距30px */
    border-radius: 10px;            /* 圆角10px */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* 阴影效果 */
    margin-bottom: 30px;            /* 下外边距30px */
}

/* 卡片头部 */
.card-header {
    margin-bottom: 20px;            /* 下外边距20px */
    border-bottom: 2px solid #e1e1e1;  /* 底部边框 */
    padding-bottom: 15px;           /* 底部内边距15px */
}

/* 卡片标题 */
.card-title {
    font-size: 24px;                /* 字体大小24px */
    color: #2c3e50;                 /* 深蓝色 */
    margin-bottom: 10px;            /* 下外边距10px */
}

/* 卡片副标题 */
.card-subtitle {
    color: #666;                    /* 灰色文字 */
    font-size: 14px;                /* 字体大小14px */
}

/* ==================== 表单样式 ==================== */

/* 表单组样式 */
.form-group {
    margin-bottom: 20px;            /* 下外边距20px */
}

/* 表单标签样式 */
.form-group label {
    display: block;                 /* 块级元素 */
    margin-bottom: 8px;             /* 下外边距8px */
    color: #333;                    /* 深灰色文字 */
    font-weight: 500;               /* 中等粗细 */
}

/* 表单控件样式 */
.form-control {
    width: 100%;                    /* 宽度100% */
    padding: 12px;                  /* 内边距12px */
    border: 2px solid #e1e1e1;      /* 浅灰色边框 */
    border-radius: 5px;             /* 圆角5px */
    font-size: 14px;                /* 字体大小14px */
    transition: border-color 0.3s;  /* 边框色过渡 */
    font-family: inherit;           /* 继承字体 */
}

/* 表单控件聚焦状态 */
.form-control:focus {
    outline: none;                  /* 去除默认轮廓 */
    border-color: #3498db;          /* 蓝色边框 */
}

/* 文本域样式 */
textarea.form-control {
    height: 200px;                  /* 高度200px */
    resize: vertical;               /* 只允许垂直调整大小 */
}

/* 表单操作区域 */
.form-actions {
    display: flex;                  /* 弹性布局 */
    gap: 15px;                      /* 项目间距15px */
    margin-top: 30px;               /* 上外边距30px */
    padding-top: 20px;              /* 上内边距20px */
    border-top: 1px solid #e1e1e1;  /* 顶部边框 */
}

/* ==================== 复选框和单选框样式 ==================== */

/* 复选框组样式 */
.checkbox-group {
    display: flex;                  /* 弹性布局 */
    gap: 20px;                      /* 项目间距20px */
    margin-top: 10px;               /* 上外边距10px */
}

/* 复选框项目样式 */
.checkbox-item {
    display: flex;                  /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    gap: 8px;                       /* 项目间距8px */
}

/* 复选框样式 */
.checkbox-item input[type="checkbox"] {
    width: 16px;                    /* 宽度16px */
    height: 16px;                   /* 高度16px */
}

/* 多选框组样式 */
.multi-select {
    display: grid;                  /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* 自适应列 */
    gap: 10px;                      /* 网格间距10px */
    border: 2px solid #e1e1e1;      /* 边框 */
    border-radius: 6px;             /* 圆角6px */
    padding: 15px;                  /* 内边距15px */
    background: #f9f9f9;            /* 浅灰色背景 */
}

/* 多选框标签样式 */
.multi-select label {
    display: flex;                  /* 弹性布局 */
    align-items: center;            /* 垂直居中 */
    gap: 8px;                       /* 项目间距8px */
    margin-bottom: 0;               /* 无下外边距 */
    cursor: pointer;                /* 鼠标指针 */
    padding: 5px;                   /* 内边距5px */
    border-radius: 4px;             /* 圆角4px */
    transition: background-color 0.3s;  /* 背景色过渡 */
}

/* 多选框标签悬停效果 */
.multi-select label:hover {
    background-color: #e9e9e9;      /* 灰色背景 */
}

/* 多选框复选框样式 */
.multi-select input[type="checkbox"] {
    width: 16px;                    /* 宽度16px */
    height: 16px;                   /* 高度16px */
}

/* ==================== 文章样式 ==================== */

/* 文章项目容器 */
.article-item {
    background: white;              /* 白色背景 */
    padding: 30px;                  /* 内边距30px */
    border-radius: 10px;            /* 圆角10px */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* 阴影效果 */
    margin-bottom: 30px;            /* 下外边距30px */
}

/* 文章标题样式 */
.article-title {
    font-size: 24px;                /* 字体大小24px */
    margin-bottom: 15px;            /* 下外边距15px */
}

/* 文章标题链接样式 */
.article-title a {
    text-decoration: none;          /* 去除下划线 */
    color: #2c3e50;                 /* 深蓝色 */
}

/* 文章标题链接悬停效果 */
.article-title a:hover {
    color: #3498db;                 /* 蓝色 */
}

/* 文章元信息样式 */
.article-meta {
    color: #666;                    /* 灰色文字 */
    font-size: 14px;                /* 字体大小14px */
    margin-bottom: 20px;            /* 下外边距20px */
}

/* 文章内容样式 */
.article-content {
    color: #555;                    /* 深灰色文字 */
    line-height: 1.8;               /* 行高1.8倍 */
    margin-bottom: 20px;            /* 下外边距20px */
}

/* 文章底部样式 */
.article-footer {
    display: flex;                  /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center;            /* 垂直居中 */
    margin-top: 20px;               /* 上外边距20px */
    padding-top: 20px;              /* 上内边距20px */
    border-top: 1px solid #e1e1e1;  /* 顶部边框 */
}

/* 阅读更多链接样式 */
.read-more {
    color: #3498db;                 /* 蓝色文字 */
    text-decoration: none;          /* 去除下划线 */
}

/* 阅读更多链接悬停效果 */
.read-more:hover {
    text-decoration: underline;     /* 添加下划线 */
}

/* ==================== 标签和分类样式 ==================== */

/* 基础徽章样式 */
.badge {
    display: inline-block;          /* 行内块元素 */
    padding: 4px 8px;               /* 内边距 */
    border-radius: 3px;             /* 圆角3px */
    font-size: 12px;                /* 字体大小12px */
    color: white;                   /* 白色文字 */
    margin-left: 10px;              /* 左外边距10px */
}

/* 置顶徽章样式 */
.badge-top {
    background: #e74c3c;            /* 红色背景 */
}

/* 推荐徽章样式 */
.badge-recommend {
    background: #f39c12;            /* 橙色背景 */
}

/* 标签样式 */
.tag, .category {
    background: #3498db;            /* 蓝色背景 */
    color: white;                   /* 白色文字 */
    padding: 3px 8px;               /* 内边距 */
    border-radius: 3px;             /* 圆角3px */
    font-size: 12px;                /* 字体大小12px */
    margin-right: 5px;              /* 右外边距5px */
    display: inline-block;          /* 行内块元素 */
}

/* 分类样式 */
.category {
    background: #e74c3c;            /* 红色背景 */
}

/* ==================== 分页样式 ==================== */

/* 分页容器 */
.pagination {
    text-align: center;             /* 文字居中 */
    margin-top: 30px;               /* 上外边距30px */
}

/* 分页按钮样式 */
.page-btn {
    display: inline-block;          /* 行内块元素 */
    padding: 10px 15px;             /* 内边距 */
    margin: 0 5px;                  /* 左右外边距5px */
    background: white;              /* 白色背景 */
    color: #333;                    /* 深灰色文字 */
    text-decoration: none;          /* 去除下划线 */
    border-radius: 5px;             /* 圆角5px */
    border: 1px solid #ddd;         /* 浅灰色边框 */
    transition: all 0.3s;           /* 全部属性过渡 */
}

/* 分页按钮悬停和激活状态 */
.page-btn:hover, .page-btn.active {
    background: #3498db;            /* 蓝色背景 */
    color: white;                   /* 白色文字 */
    border-color: #3498db;          /* 蓝色边框 */
}

/* 分页省略号 */
.page-dots {
    display: inline-block;          /* 行内块元素 */
    padding: 10px 5px;              /* 内边距 */
    color: #666;                    /* 灰色文字 */
}

/* ==================== 评论样式 ==================== */

/* 评论表单样式 */
.comment-form {
    background: #f9f9f9;            /* 浅灰色背景 */
    padding: 25px;                  /* 内边距25px */
    border-radius: 8px;             /* 圆角8px */
    margin-bottom: 30px;            /* 下外边距30px */
}

/* 评论列表样式 */
.comment-list {
    list-style: none;               /* 去除列表样式 */
}

/* 评论项目样式 */
.comment-item {
    background: white;              /* 白色背景 */
    padding: 20px;                  /* 内边距20px */
    border-radius: 8px;             /* 圆角8px */
    margin-bottom: 15px;            /* 下外边距15px */
    border-left: 4px solid #3498db; /* 左边蓝色边框 */
}

/* 评论头部样式 */
.comment-header {
    display: flex;                  /* 弹性布局 */
    justify-content: space-between; /* 两端对齐 */
    align-items: center;            /* 垂直居中 */
    margin-bottom: 10px;            /* 下外边距10px */
}

/* 评论作者样式 */
.comment-author {
    font-weight: bold;              /* 粗体 */
    color: #2c3e50;                 /* 深蓝色 */
}

/* 评论时间样式 */
.comment-time {
    color: #666;                    /* 灰色文字 */
    font-size: 12px;                /* 字体大小12px */
}

/* 评论内容样式 */
.comment-content {
    color: #555;                    /* 深灰色文字 */
    line-height: 1.6;               /* 行高1.6倍 */
    margin-bottom: 10px;            /* 下外边距10px */
}

/* 评论操作样式 */
.comment-actions {
    display: flex;                  /* 弹性布局 */
    gap: 10px;                      /* 项目间距10px */
}

/* ==================== 统计卡片样式 ==================== */

/* 统计网格容器 */
.stats-grid {
    display: grid;                  /* 网格布局 */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));  /* 自适应列 */
    gap: 20px;                      /* 网格间距20px */
    margin-bottom: 30px;            /* 下外边距30px */
}

/* 统计卡片样式 */
.stat-card {
    background: white;              /* 白色背景 */
    padding: 25px;                  /* 内边距25px */
    border-radius: 10px;            /* 圆角10px */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* 阴影效果 */
    text-align: center;             /* 文字居中 */
    transition: transform 0.3s;     /* 变换过渡 */
}

/* 统计卡片悬停效果 */
.stat-card:hover {
    transform: translateY(-5px);    /* 向上移动5px */
}

/* 统计数字样式 */
.stat-number {
    font-size: 36px;                /* 字体大小36px */
    font-weight: bold;              /* 粗体 */
    margin-bottom: 10px;            /* 下外边距10px */
    color: #3498db;                 /* 蓝色 */
}

/* 统计标签样式 */
.stat-label {
    color: #666;                    /* 灰色文字 */
    font-size: 14px;                /* 字体大小14px */
}

/* ==================== 表格样式 ==================== */

/* 基础表格样式 */
.table {
    width: 100%;                    /* 宽度100% */
    border-collapse: collapse;      /* 合并边框 */
    background: white;              /* 白色背景 */
    border-radius: 8px;             /* 圆角8px */
    overflow: hidden;               /* 隐藏溢出 */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* 阴影效果 */
}

/* 表格单元格样式 */
.table th,
.table td {
    padding: 15px;                  /* 内边距15px */
    text-align: left;               /* 左对齐 */
    border-bottom: 1px solid #e1e1e1;  /* 底部边框 */
}

/* 表格头部样式 */
.table th {
    background: #f8f9fa;            /* 浅灰色背景 */
    font-weight: 600;               /* 中等粗细 */
    color: #2c3e50;                 /* 深蓝色文字 */
}

/* 表格行悬停效果 */
.table tr:hover {
    background: #f8f9fa;            /* 浅灰色背景 */
}

/* ==================== 登录/注册页面样式 ==================== */

/* 认证页面容器 */
.auth-container {
    background: white;              /* 白色背景 */
    padding: 40px;                  /* 内边距40px */
    border-radius: 10px;            /* 圆角10px */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);  /* 阴影效果 */
    width: 100%;                    /* 宽度100% */
    max-width: 400px;               /* 最大宽度400px */
    margin: 0 auto;                 /* 水平居中 */
}

/* 认证页面头部 */
.auth-header {
    text-align: center;             /* 文字居中 */
    margin-bottom: 30px;            /* 下外边距30px */
}

/* 认证页面标题 */
.auth-header h1 {
    color: #2c3e50;                 /* 深蓝色 */
    margin-bottom: 10px;            /* 下外边距10px */
}

/* 认证页面副标题 */
.auth-header p {
    color: #666;                    /* 灰色文字 */
}

/* 认证页面链接区域 */
.auth-links {
    text-align: center;             /* 文字居中 */
    margin-top: 20px;               /* 上外边距20px */
}

/* 认证页面链接样式 */
.auth-links a {
    color: #3498db;                 /* 蓝色文字 */
    text-decoration: none;          /* 去除下划线 */
    margin: 0 10px;                 /* 左右外边距10px */
}

/* 认证页面链接悬停效果 */
.auth-links a:hover {
    text-decoration: underline;     /* 添加下划线 */
}

/* ==================== 帮助文本样式 ==================== */

/* 帮助文本样式 */
.help-text {
    font-size: 12px;                /* 字体大小12px */
    color: #666;                    /* 灰色文字 */
    margin-top: 5px;                /* 上外边距5px */
}

/* 文件上传样式 */
.file-upload {
    position: relative;             /* 相对定位 */
    display: inline-block;          /* 行内块元素 */
    cursor: pointer;                /* 鼠标指针 */
    width: 100%;                    /* 宽度100% */
}

/* 隐藏的文件输入框 */
.file-upload input[type="file"] {
    position: absolute;             /* 绝对定位 */
    opacity: 0;                     /* 完全透明 */
    width: 100%;                    /* 宽度100% */
    height: 100%;                   /* 高度100% */
    cursor: pointer;                /* 鼠标指针 */
}

/* 文件上传标签样式 */
.file-upload-label {
    display: block;                 /* 块级元素 */
    padding: 12px;                  /* 内边距12px */
    border: 2px dashed #ccc;        /* 虚线边框 */
    border-radius: 6px;             /* 圆角6px */
    text-align: center;             /* 文字居中 */
    transition: border-color 0.3s;  /* 边框色过渡 */
    background: #f9f9f9;            /* 浅灰色背景 */
}

/* 文件上传标签悬停效果 */
.file-upload:hover .file-upload-label {
    border-color: #3498db;          /* 蓝色边框 */
    background: #f0f8ff;            /* 浅蓝色背景 */
}

/* ==================== 响应式设计 ==================== */

/* 平板设备样式 (768px以下) */
@media (max-width: 768px) {
    .container {
        padding: 15px;              /* 减少内边距 */
    }
    
    .header-content {
        flex-direction: column;     /* 垂直排列 */
        gap: 15px;                  /* 项目间距15px */
    }
    
    .nav {
        flex-wrap: wrap;            /* 允许换行 */
        justify-content: center;    /* 居中对齐 */
    }
    
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));  /* 调整最小列宽 */
    }
    
    .article-item {
        padding: 20px;              /* 减少内边距 */
    }
    
    .card {
        padding: 20px;              /* 减少内边距 */
    }
    
    .form-actions {
        flex-direction: column;     /* 垂直排列 */
    }
    
    .checkbox-group {
        flex-direction: column;     /* 垂直排列 */
        gap: 10px;                  /* 减少间距 */
    }
}

/* 手机设备样式 (480px以下) */
@media (max-width: 480px) {
    .container {
        padding: 10px;              /* 进一步减少内边距 */
    }
    
    .stats-grid {
        grid-template-columns: 1fr; /* 单列布局 */
    }
    
    .nav {
        gap: 10px;                  /* 减少间距 */
    }
    
    .nav a {
        padding: 8px 12px;          /* 减少内边距 */
        font-size: 14px;            /* 减小字体 */
    }
    
    .auth-container {
        padding: 20px;              /* 减少内边距 */
        margin: 10px;               /* 添加外边距 */
    }
}

/* ==================== 打印样式 ==================== */

/* 打印时隐藏不必要的元素 */
@media print {
    .nav, .form-actions, .btn {
        display: none !important;   /* 隐藏导航和按钮 */
    }
    
    body {
        background: white !important;  /* 白色背景 */
    }
    
    .card, .article-item {
        box-shadow: none !important;   /* 去除阴影 */
        border: 1px solid #ddd;        /* 添加边框 */
    }
}

/* ==================== 特殊页面样式 ==================== */

/* 空状态样式 */
.empty-state {
    text-align: center;             /* 文字居中 */
    padding: 50px 20px;             /* 内边距 */
    color: #666;                    /* 灰色文字 */
}

/* 加载状态样式 */
.loading {
    text-align: center;             /* 文字居中 */
    padding: 20px;                  /* 内边距20px */
    color: #999;                    /* 浅灰色文字 */
}

/* 文字居中工具类 */
.text-center {
    text-align: center;             /* 文字居中 */
}

/* 文字左对齐工具类 */
.text-left {
    text-align: left;               /* 文字左对齐 */
}

/* 文字右对齐工具类 */
.text-right {
    text-align: right;              /* 文字右对齐 */
}

/* 隐藏元素工具类 */
.hidden {
    display: none;                  /* 隐藏元素 */
}

/* 显示元素工具类 */
.visible {
    display: block;                 /* 显示元素 */
} 